<template>
	<uni-popup ref="popup" type="center" style="z-index: 910" @maskClick="maskClick()">
		<view class="pop column">
			<view class="top">{{nickname}}</view>
			<view style="color:#3F90FF;margin-top:15rpx;" v-if="infor.code">兑换码:{{infor.code}}</view>
			<image :src="image" mode="" style="width: 318rpx;height: 318rpx;margin: 20rpx 0px;">
			</image>
			<view class="direction-start" style="font-size: 26rpx;" v-if="infor.phone">
				<view v-if="infor.expirytime">有效期：{{infor.expirytime}}</view>
				<view @click="telCall(infor.phone)">联系电话：{{infor.phone}}</view>
				<view @click="NavigationLoc()">地址：{{infor.store_address}} <uni-icons type="paperplane"
						size="20"></uni-icons>
				</view>
			</view>
			<view v-else>请出示兑换码</view>
		</view>
	</uni-popup>
	<!-- 导航 -->
	<uni-popup ref="Navigation" type="bottom" style="width:100%;">
		<view class="popup">
			<view class="" @click="daohang('bai')">百度地图</view>
			<view class="" @click="daohang('de')">高德地图</view>
			<view class="" @click="daohang('teng')">腾讯地图</view>
			<view class="" @click="() => Navigation.close()">取消</view>
		</view>
	</uni-popup>
	<!-- 当前位置经纬度 -->
	<Lotlats @position="position" ref="Lotlat"></Lotlats>
</template>

<script setup lang="ts">
	import { navTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import { telCall } from '@/utils/copyText';
	import { subject, subscribe, toPublish, unsubscribe } from '@mqtt';
	import { onUnload } from '@dcloudio/uni-app';
	import { errorToast, successToast, showLoading } from '@/utils/prompt';
	import Lotlats from '@c/team/Lotlat.vue';
	import type { Subscription } from 'rxjs';
	let subscription : Subscription = null;
	const props = defineProps({
		type: {
			type: Number,
		}
	});
	const popup = ref(null)
	const Navigation = ref(null)
	const nickname = ref('')
	const image = ref('')
	const orderId = ref()
	const infor = ref()
	const longitude = ref(0); //纬度113.62493
	const latitude = ref(0); //经度34.74725
	const title = ref()
	const emit = defineEmits(['submit']);
	// score/doDuihuan
	function shares(name : string, id : string) {
		nickname.value = name
		showLoading()
		const payload = {
			id: id
		};
		toPublish('score/doDuihuan2', payload, (obj : any) => {
			const { code, msg, data } = obj;
			if (code === 1) {
				infor.value = data
				image.value = data.image
				orderId.value = data.order_id
				popup.value.open();
				title.value = infor.value.code ? infor.value.code : orderId.value
				topics()
			} else {
				errorToast(msg);
			}
		});
	}
	function censor(img : string, data : any, id : number) {
		infor.value = data
		image.value = img
		orderId.value = id
		popup.value.open();
		title.value = infor.value.code ? infor.value.code : id
		topics()
	}
	function integration(num : any) {
		const ref = num;
		if (ref.type === 'success') {
			successToast('核销成功')
			emit('submit');
			// navTo('pointsMall/orderDetail')
			if(!props.type){
				setTimeout(() => {
					navTo('gemstone/recordsList')
				}, 1000)
			}
			popup.value.close();
			deltopics();
		}
	}
	function maskClick(){
		emit('submit');
	}
	/**
	 * 订阅主题
	 */
	function topics() {
		const topic = 'formal/v1/integral/Verification/client/' + title.value;
		toSubscribe();
		subscribe(topic);
	}
	/**
	 * 取消订阅
	 */
	function deltopics() {
		toUnsubscribe();
		const topic = 'formal/v1/integral/Verification/client/' + title.value;
		unsubscribe(topic);
	}

	function toSubscribe() {
		if (subscription === null) {
			subscription = subject.subscribe(integration);
		}
	}

	function toUnsubscribe() {
		subscription.unsubscribe();
		subscription = null;
	}
	/**
	 * 导航并打开导航弹框
	 */
	function NavigationLoc() {
		popup.value.close();
		Navigation.value.open()
	}
	function position(lat : any, lot : any) {
		longitude.value = lot;
		latitude.value = lat;
	}
	/**
	 * 导航方式
	 * @property {String} type 选择导航方式
	 */
	function daohang(type : string) {
		let position = {
			latitude: Number(infor.value.latitude),
			longitude: Number(infor.value.longitude),
		};
		let addres = infor.value.store_address;
		switch (type) {
			//高德地图高航
			case 'de':
				window.location.href = `https://uri.amap.com/navigation?from=${longitude.value},${latitude.value},当前位置&to=${infor.value.longitude
					},${infor.value.latitude},${infor.value.store_address}&mode=car&policy=1&src=${infor.value.store_address
					}&coordinate=gaode&callnative=1`;
				break;
			//百度地图导航
			case 'bai':
				window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${latitude.value},${longitude.value
					}|name:当前位置&destination=${position}|name:${addres},&mode=driving&region=henan&output=html&src=webapp.baidu.openAPIdemo`;
				break;
			//腾讯地图导航
			case 'teng':
				window.location.href = `http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${addres}&tocoord=${position}&referer=dfdfd`;
				break;
		}
	}
	onUnload(() => {
		if (subscription !== null) {
			subscription.unsubscribe();
		}
		deltopics();
	})
	defineExpose({
		shares,
		censor
	});
</script>

<style scoped lang="less">
	.pop {
		width: 600rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 5px;

		.top {
			width: 100%;
			text-align: center;
		}
	}

	.popup {
		width: 100%;

		view {
			width: 100%;
			padding: 25rpx 0px;
			box-sizing: border-box;
			background-color: white;
			text-align: center;
			font-size: 32rpx;
		}

		view:nth-of-type(2) {
			border-bottom: 1px solid #eee;
			border-top: 1px solid #eee;
		}

		view:nth-last-child(1) {
			margin-top: 20rpx;
		}
	}
</style>